<script lang="ts" setup>
import { EChartsOption } from 'echarts'
import 'echarts-wordcloud'

const options: EChartsOption = reactive({
  series: [
    {
      type: 'wordCloud',
      shape: 'circle',
      keepAspect: false,
      left: 'center',
      top: '-15px',
      width: '98%',
      height: '100%',
      right: null,
      bottom: null,
      sizeRange: [8, 16],
      rotationRange: [-90, 90],
      rotationStep: 45,
      gridSize: 8,
      drawOutOfBound: false,
      layoutAnimation: true,
      textStyle: {
        fontFamily: 'sans-serif',
        fontWeight: 'bold',
        color: function () {
          return (
            'rgb(' +
            [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') +
            ')'
          )
        }
      },
      emphasis: {
        // focus: 'self',
        textStyle: {
          textShadowBlur: 5,
          textShadowColor: '#333'
        }
      },
      data: [
        { name: '袜子', value: 3 },
        { name: '鞋子', value: 5 },
        { name: 'T恤', value: 7 },
        { name: '裤子', value: 6 },
        { name: '帽子', value: 4 },
        { name: '围巾', value: 2 },
        { name: '手套', value: 2 },
        { name: '夹克', value: 8 },
        { name: '衬衫', value: 7 },
        { name: '皮带', value: 3 },
        { name: '背包', value: 5 },
        { name: '眼镜', value: 4 },
        { name: '手表', value: 4 },
        { name: '领带', value: 2 },
        { name: '耳环', value: 2 },
        { name: '项链', value: 3 },
        { name: '手链', value: 3 },
        { name: '戒指', value: 2 },
        { name: '连衣裙', value: 9 },
        { name: '短裤', value: 6 },
        { name: '泳装', value: 4 },
        { name: '内衣', value: 8 },
        { name: '睡衣', value: 5 },
        { name: '运动服', value: 7 },
        { name: '毛衣', value: 6 },
        { name: '风衣', value: 5 },
        { name: '牛仔裤', value: 7 },
        { name: '高跟鞋', value: 4 },
        { name: '凉鞋', value: 5 },
        { name: '拖鞋', value: 3 },
        { name: '靴子', value: 6 },
        { name: '卫衣', value: 5 },
        { name: '皮衣', value: 4 },
        { name: '羽绒服', value: 4 },
        { name: '棉衣', value: 4 },
        { name: '西装', value: 3 },
        { name: '领结', value: 2 },
        { name: '胸针', value: 2 },
        { name: '发卡', value: 2 },
        { name: '耳罩', value: 2 },
        { name: '披肩', value: 2 },
        { name: '手提包', value: 3 },
        { name: '公文包', value: 2 },
        { name: '钱包', value: 2 },
        { name: '太阳镜', value: 3 },
        { name: '墨镜', value: 3 },
        { name: '雨伞', value: 2 },
        { name: '棒球帽', value: 3 },
        { name: '贝雷帽', value: 2 },
        { name: '连帽衫', value: 5 },
        { name: '皮手套', value: 2 },
        { name: '鸭舌帽', value: 3 },
        { name: '长裤', value: 6 },
        { name: '马甲', value: 4 },
        { name: '吊带裙', value: 5 },
        { name: '沙滩裤', value: 4 },
        { name: '短袖衬衫', value: 6 },
        { name: '针织衫', value: 7 },
        { name: '运动鞋', value: 8 },
        { name: '马丁靴', value: 5 },
        { name: '休闲鞋', value: 6 },
        { name: '拖鞋凉鞋', value: 3 },
        { name: '高筒靴', value: 4 },
        { name: '登山鞋', value: 5 },
        { name: '帆布鞋', value: 7 },
        { name: '乐福鞋', value: 5 },
        { name: '工装裤', value: 5 },
        { name: '牛仔夹克', value: 6 },
        { name: '羽绒背心', value: 4 },
        { name: '运动紧身裤', value: 7 },
        { name: '瑜伽裤', value: 6 },
        { name: '棒球外套', value: 5 },
        { name: '风雪大衣', value: 4 },
        { name: '皮草外套', value: 3 },
        { name: '皮夹克', value: 6 },
        { name: '风衣外套', value: 5 },
        { name: '皮靴', value: 4 },
        { name: '凉鞋式拖鞋', value: 3 },
        { name: '高跟凉鞋', value: 4 },
        { name: '平底鞋', value: 5 },
        { name: '高跟单鞋', value: 4 },
        { name: '运动背心', value: 6 },
        { name: '跑步鞋', value: 7 },
        { name: '登山包', value: 5 },
        { name: '双肩包', value: 6 },
        { name: '斜挎包', value: 4 },
        { name: '旅行箱', value: 5 },
        { name: '行李箱', value: 6 },
        { name: '商务包', value: 4 },
        { name: '手拿包', value: 3 },
        { name: '腰包', value: 4 },
        { name: '运动帽', value: 5 },
        { name: '针织帽', value: 4 },
        { name: '贝雷帽', value: 3 },
        { name: '遮阳帽', value: 4 },
        { name: '棒球棒', value: 3 },
        { name: '网球拍', value: 4 },
        { name: '篮球', value: 6 },
        { name: '足球', value: 7 },
        { name: '排球', value: 5 },
        { name: '高尔夫球杆', value: 4 },
        { name: '羽毛球拍', value: 5 },
        { name: '乒乓球拍', value: 3 }
      ]
    }
  ]
})
</script>

<template>
  <SpEcharts :option="options" height="400px" title="商品搜索词云"> </SpEcharts>
</template>

<style scoped></style>
